<template>
  <div>
    <XtxTabs v-model="activename" @tabclick="tabClick">
      <XtxTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
      </XtxTabsPanel>
    </XtxTabs>
    <!-- <A v-model="mm"></A>
    {{ mm }} -->
    <!-- 订单列表 -->
    <div class="order-list">
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderlist.length === 0">暂无数据</div>
      <OrderItem
        v-for="order in orderlist"
        :key="order.id"
        :order="order"
        @on-cancel="handlecancel"
        @on-delete="handledelete"
        @on-confirm="handleconfirm"
        @on-logistics="handlelogistics"
      ></OrderItem>
    </div>
    <!-- 分页 -->
    <XtxPagination
      v-if="orderlist.length > 0"
      :currentPage="requestparams.page"
      :total="orderlist.length"
      :pagesize="requestparams.pagesize"
      @currentchange="requestparams.page = $event"
    ></XtxPagination>
  </div>
  <Cancel ref="cancelcom"></Cancel>
  <Logistics ref="logisticcom"></Logistics>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance } from 'vue'
import { orderStatus } from '@/apis/constants'
import OrderItem from './components/order-item.vue'
import Cancel from './components/order-cancel.vue'
import Logistics from './components/order-logistics.vue'
import { findOrderList, deleteOrder, confirmOrder } from '@/apis/order'
import confirmfn from '@/components/library/confirm'
import messagefn from '@/components/library/message'
export default {
  components: { OrderItem, Cancel, Logistics },
  setup () {
    // 选项卡的动态类名
    const activename = ref('all')
    // 获取订单的请求参数
    const requestparams = reactive({
      page: 1,
      pageSize: 10,
      orderState: 0
    })
    const orderlist = ref([])
    // 加载状态
    const loading = ref(true)
    const findlist = () => {
      findOrderList(requestparams).then((res) => {
        // console.log(res.result.items)
        orderlist.value = res.result.items
        loading.value = false
      })
    }
    watch(
      requestparams,
      () => {
        findlist()
      },
      { immediate: true }
    )
    // 删除订单
    const { proxy } = getCurrentInstance()
    const handledelete = (order) => {
      proxy
        .$confirm({ title: '温馨提示', text: '你确认删除此订单吗' })
        .then(() => {
          return deleteOrder(order.id)
        })
        .then(() => {
          findlist()
          proxy.$message({ type: 'success', text: '删除订单成功' })
        })
        .catch((e) => {})
    }
    // 切换请求参数
    const tabClick = ({ i }) => {
      requestparams.orderState = i
      requestparams.page = 1
    }
    return {
      activename,
      orderStatus,
      orderlist,
      tabClick,
      requestparams,
      loading,
      handledelete,
      ...useCancel(),
      ...useConfirm(),
      ...useLogistics()
    }
  }
}

// 处理取消订单
export const useCancel = () => {
  const cancelcom = ref(null)
  // 点击取消订单
  const handlecancel = (order) => {
    cancelcom.value.open(order)
  }
  return { cancelcom, handlecancel }
}
// 处理确认收货
export const useConfirm = () => {
  const handleconfirm = (order) => {
    confirmfn({ title: '温馨提示', text: '你确定要确认收货吗？' })
      .then(() => {
        return confirmOrder(order.id)
      })
      .then(() => {
        order.orderState = 4
        messagefn({ type: 'success', text: '确认收获成功' })
      })
      .catch(() => {})
  }
  return { handleconfirm }
}
// 处理查看物流
const useLogistics = () => {
  const logisticcom = ref(null)
  const handlelogistics = (order) => {
    logisticcom.value.open(order)
  }
  return { handlelogistics, logisticcom }
}
</script>

<style lang="less" scoped>
.member-order {
  height: 100%;
  background: #fff;
}
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9) url(../../../assets/images/load.gif)
    no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
